<form class="forms-content" *ngIf="type" nz-form [formGroup]="forms" (ngSubmit)="submitForm($event)">
  <div [ngSwitch]="type">
    <!-- //WFS// -->
    <div *ngSwitchCase="'WFS'">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>主机地址</span>
            <nz-tooltip [nzTitle]="'geoserver主机地址'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="host"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('host').dirty && getFormControl('host').hasError('required')">主机地址不能为空!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>图层名称</span>
            <nz-tooltip [nzTitle]="'图层在GeoServer中的名称'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="name"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('name').dirty && getFormControl('name').hasError('required')">图层名称不能为空!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>工作空间名称</span>
            <nz-tooltip [nzTitle]="'图层所在工作空间名称'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="namespace"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('namespace').dirty && getFormControl('namespace').hasError('required')">工作空间名称不能为空!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>工作空间URI</span>
            <nz-tooltip [nzTitle]="'图层所在工作空间URI'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="namespaceURI"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('namespaceURI').dirty && getFormControl('namespaceURI').hasError('required')">工作空间URI不能为空!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>空间字段</span>
            <nz-tooltip [nzTitle]="'图层指定的空间字段名称'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="geometryName"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('geometryName').dirty && getFormControl('geometryName').hasError('required')">空间字段不能为空!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>坐标系</span>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="srsName"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('srsName').dirty && getFormControl('srsName').hasError('required')">坐标系不能为空!</div>
        </div>
      </div>
    </div>
    <!-- //WMS/ -->
    <div *ngSwitchCase="'WMS'">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>服务器类型</span>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24">
          <nz-select formControlName="serverType" nzPlaceHolder="选择服务器类型">
            <nz-option [nzLabel]="'geoserver'" [nzValue]="'geoserver'">
            </nz-option>
          </nz-select>
        </div>
      </div>
      <div formGroupName="params">
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
            <label nz-form-item-required>
              <span>图层名称</span>
              <nz-tooltip [nzTitle]="'空间:图层，比如：coal:jiexian'">
                <i nz-tooltip class="anticon anticon-question-circle-o"></i>
              </nz-tooltip>
            </label>
          </div>
          <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
            <nz-input [nzSize]="'large'" formControlName="LAYERS"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('params', 'LAYERS').dirty && getFormControl('params', 'LAYERS').hasError('required')">图层名称不能为空!</div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
            <label nz-form-item-required>
              <span>图层样式</span>
            </label>
          </div>
          <div nz-form-control nz-col [nzSm]="12" [nzXs]="24">
            <nz-input [nzSize]="'large'" formControlName="STYLES"></nz-input>
          </div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>坐标系</span>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="projection"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('projection').dirty && getFormControl('projection').hasError('required')">坐标系不能为空!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>服务地址</span>
            <nz-tooltip [nzTitle]="'比如/geoserver/<工作空间名称>/wms'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="url"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('url').dirty && getFormControl('url').hasError('required')">服务地址不能为空!</div>
        </div>
      </div>
    </div>

    <div *ngSwitchCase="'JSONXY'">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>数据地址</span>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="url"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('url').dirty && getFormControl('url').hasError('required')">数据地址不能为空!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>精度字段</span>
            <nz-tooltip [nzTitle]="'指定数据中代表精度的字段'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="x"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('x').dirty && getFormControl('x').hasError('required')">精度字段不能为空!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>纬度字段</span>
            <nz-tooltip [nzTitle]="'指定数据中代表纬度的字段'">
              <i nz-tooltip class="anticon anticon-question-circle-o"></i>
            </nz-tooltip>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="y"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('y').dirty && getFormControl('y').hasError('required')">纬度字段不能为空!</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>坐标系</span>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="projection"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('projection').dirty && getFormControl('projection').hasError('required')">坐标系不能为空!</div>
        </div>
      </div>
    </div>

    <div *ngSwitchCase="'JSON'">
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
          <label nz-form-item-required>
            <span>数据地址</span>
          </label>
        </div>
        <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" nzHasFeedback>
          <nz-input [nzSize]="'large'" formControlName="url"></nz-input>
          <div nz-form-explain *ngIf="getFormControl('url').dirty && getFormControl('url').hasError('required')">数据地址不能为空!</div>
        </div>
      </div>
    </div>

  </div>

  <div nz-form-item nz-row>
    <div nz-form-control nz-col [nzSpan]="18" [nzOffset]="6">
      <button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="loading">下一步</button>
      <button type="button" nz-button [nzSize]="'large'" [nzType]="'default'" (click)="goPreviousStep()">上一步</button>
    </div>
  </div>

</form>
